<template>
    <div class="chart" ref="chart" :style="{ width: props.width, height: props.height }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import echarts from '@/utils/echart.ts';
// import roma from './cust-roma.json';
import blue from './cust-blue.json';
import dark from './cust-dark.json';

const isDark = useDark();
const emit = defineEmits(['getChartIns']); // 定义事件
const chart = ref<HTMLElement | null>(null);
const props = defineProps(
    {
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '100%',
        },
        option: {
            type: Object,
            default: {},
        },
        isInitChartSize: {
            type: Boolean,
            default: false,
        },
        rendering: {
            type: String,
            default: 'canvas',
        }
    }
)
//监听窗口的大小
let observer: ResizeObserver;
let newChart: echarts.ECharts; // 用于存储 ECharts 实例
let chartElement: any;
const dpr = window.devicePixelRatio*2 || 2.5;
onMounted(() => {
    // document.querySelector('.chart')?.addEventListener('mousewheel', handler, { passive: true });
    chartElement = chart.value;    
    echarts.registerTheme('dark', dark);
    echarts.registerTheme('blue', blue);
    if (chartElement) {        
        if (props.isInitChartSize) {
            newChart = echarts.init(chartElement, isDark.value ? 'dark' : 'blue', {
                renderer: (props.rendering === 'canvas') ? 'canvas' : 'svg',
                width: props.width,
                height: props.height,
                devicePixelRatio: dpr
            });
        } else {
            newChart = echarts.init(chartElement, isDark.value ? 'dark' : 'blue', { renderer: (props.rendering === 'canvas') ? 'canvas' : 'svg',devicePixelRatio: dpr });
        }
        newChart.setOption({
            backgroundColor: isDark.value ? '#1d1e1f' : '#fff',
            ...props.option
        });
        watch(isDark, (newVal) => {
            // console.log('是否切换背景');
            newChart.dispose(); // 销毁之前的实例      
            newChart = echarts.init(chartElement, newVal ? 'dark' : 'blue', { renderer: (props.rendering === 'canvas') ? 'canvas' : 'svg',devicePixelRatio: dpr });
            newChart.setOption({
                backgroundColor: isDark.value ? '#1d1e1f' : '#fff',
                ...props.option
            });
        });
        // 监听 props.option 的变化
        watch(() => props.option, (newVal, oldVal) => {
            // console.log('监听props变化',newVal,oldVal);
            if (newVal !== oldVal) {
                if (newChart) {
                    newChart.clear();
                    newChart.setOption({
                        backgroundColor: isDark.value ? '#1d1e1f' : '#fff',
                        ...newVal
                    });
                }
            }
        });
        emit('getChartIns', newChart); // 传递新创建的图表实例
        const handleResize = () => {
            newChart.resize();
        }; // 防抖时间为100毫秒，可以根据需要调整
        observer = new ResizeObserver(handleResize);
        observer.observe(chartElement);
        // 监听窗口 resize 事件
        // const resizeHandler = () => {
        //     newChart.resize();
        // };

        // window.addEventListener('resize', resizeHandler);
        // // 在组件卸载时进行清理工作
        // onUnmounted(() => {
        //     window.removeEventListener('resize', resizeHandler);
        // });  
    }
});
onUnmounted(() => {
    if(newChart){
        // console.log(newChart)
        newChart.dispose(); // 销毁之前的实例
    }
    observer.unobserve(chartElement);
    chartElement = null;
});

</script>

<style scoped lang="scss"></style>